
import QtQuick 2.4
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.3
import QtQuick.Controls.Styles 1.3
//雾霾效果框
Item
{
    id:dynamicWind02ItemSubmenu
    //        visible:true
    width:dynamicWind02ItemBg.width
    height:dynamicWind02ItemBg.height
    transform: Scale { origin.x: 0; origin.y: 0; xScale: root.x_enl-0.3;yScale: root.y_enl-0.3}
    property alias value: slider02.value
    Image
    {
        id:dynamicWind02ItemBg
        height: 180
        source:"./切图/态势感知/雾霾控件底子.png"
        MouseArea{id:dynamicWind02ItemBgArea;anchors.fill:parent}
    }
    Text
    {
        id:openOrclos
        anchors.top: dynamicWind02ItemBg.top
        anchors.topMargin: 20
        anchors.left: dynamicWind02ItemBg.left
        anchors.leftMargin: 50
        text:"雾霾:"
        font.pixelSize: 14
        color: "white"
        font.family: "微软雅黑"

    }
    Switch
    {
        id:littleBoxz
        anchors.left: openOrclos.right
        anchors.leftMargin: 8
        anchors.top: openOrclos.top
        anchors.topMargin: 5
        checked:true
        style:   SwitchStyle
        {
            groove:Rectangle
            {

                implicitHeight:14
                implicitWidth:40
                color:control.checked?"#15d5b2":"#777777"
                border.color: control.checked?"#15d5b2":"#777777"
                border.width: 1
            }
            handle:Rectangle
            {
                implicitHeight:14
                implicitWidth:21
                //                    color:control.checked?"#ffffff":"#999999"
                color:control.checked?"#eeeeee":"#999999"
                border.color: control.checked?"#15d9b2":"#777777"
                border.width: 1
            }


        }
        onCheckedChanged:
        {
            //TODO
            app.slotFogEnable(checked)
        }
    }

//    Text
//    {
//        id:dynamicWindTimeSel
//        anchors.top: openOrclos.bottom
//        anchors.topMargin: 20
//        anchors.left: dynamicWind02ItemBg.left
//        anchors.leftMargin: 50
//        text:"时间:  2017-02-01"
//        font.pixelSize: 14
//        color: "white"
//        font.family: "微软雅黑"

//    }
    RowLayout
    {
        id:dynamicWindTimeSel
        anchors.top: openOrclos.bottom
        anchors.topMargin: 20
        anchors.left: dynamicWind02ItemBg.left
        anchors.leftMargin: 50
        Text{
//            width: 65
            text:" 日期: "
            font.pixelSize: 14
            color: "white"
            font.family: "微软雅黑"
            horizontalAlignment: Text.AlignHCenter
        }
//        MyCalendarNot{
//            id:myCalendar
//            x: 70

//            implicitWidth:175
//            dateValue: (new Date()).toLocaleString(Qt.locale(), "yyyy-MM-dd")
//            onDateValueChanged: {
//             text = dateValue
//             //var date = myCalendar.text;
//            }
//        }

    TextField
    {
        id: textField1

        property string dateValue
        x: 0
        y: 0
//        width: 215
        width: 145
        height: 30
        text:new Date().toLocaleString(Qt.locale(), "yyyy-MM-dd")
        z: 1
        style: TextFieldStyle {
            textColor: "white"
            background: Rectangle {
                color: "#CC333333"
                radius: 2

                implicitWidth: 145
                implicitHeight: 30
                border.color: "#FFCCCCCC"
                border.width: 1
            }
        }

        Calendar{
            id: calendar
            width: 374
            height: 259
//            z: calendar.visible ? 99:0
            anchors.topMargin: 10
            anchors.top: parent.bottom
//            anchors.left: openOrclos.left
            visible: false
            activeFocusOnTab: true
            maximumDate: new Date() //最大值默认为当前日期
            style: CalendarStyle {

                dayDelegate: Rectangle {
                    gradient: Gradient {
                        GradientStop {
                            position: 0.00
                            color: styleData.selected ? "#111" : (styleData.visibleMonth && styleData.valid ? "#444" : "#666");
                        }
                        GradientStop {
                            position: 1.00
                            color: styleData.selected ? "#444" : (styleData.visibleMonth && styleData.valid ? "#111" : "#666");
                        }
                        GradientStop {
                            position: 1.00
                            color: styleData.selected ? "#777" : (styleData.visibleMonth && styleData.valid ? "#111" : "#666");
                        }
                    }

                    Label {
                        text: styleData.date.getDate()
                        anchors.centerIn: parent
                        color: styleData.valid ? "white" : "grey"
                    }

                    Rectangle {
                        width: parent.width
                        height: 1
                        color: "#555"
                        anchors.bottom: parent.bottom
                    }

                    Rectangle {
                        width: 1
                        height: parent.height
                        color: "#555"
                        anchors.right: parent.right
                    }
                }
            }


            onReleased: {
                textField1.text = date;
                var datu = date.toLocaleString(Qt.locale(), "yyyy-MM-dd") +" 00:00:00"
                textField1.text = textField1.text.substr(0, 10);
                textField1.dateValue = textField1.text;
                var dati = app.getDefaValue("410100",datu)
                if(dati.length > 0)
                {
                    slider02.value = dati
                }



                calendar.visible = false;
            }
        }

        Button{
            id: downBtn
            width: 25
            height: 25
            antialiasing: false
            z: 0
            transformOrigin: Item.Center
            scale: 1
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 0
            anchors.top: parent.top
            anchors.topMargin: 0
            iconSource: "./切图/查询定位/下拉触碰.png"
            style: ButtonStyle{
                background: Rectangle {
                    implicitWidth: 20
                    implicitHeight: 2
                }

            }
            onClicked:
            {
                calendar.x = -80
                calendar.visible = !calendar.visible
            }
        }

        onDateValueChanged: {
            text = dateValue;
            calendar.selectedDate = dateValue;
        }
    }

    }

    Image
    {
        id:dynamicWind03Close
        source:"./切图/排行/关闭.png"
        anchors.top:dynamicWind02ItemBg.top
        anchors.right: dynamicWind02ItemBg.right
        anchors.topMargin: 10
        anchors.rightMargin: 10
        MouseArea{id:dynamicWind03CloseArea;anchors.fill:parent
            onClicked:
            {
                dynamicWind02ItemSubmenu.visible = false
                app.slotFogCity(false)

            }
        }
    }
    Text
    {
        id:heightRest
        anchors.right: dynamicWind03Close.left
        anchors.rightMargin: 20
        anchors.top:dynamicWind02ItemBg.top
        anchors.topMargin: 8
        text:"重置"
        font.underline: true

        font.pixelSize: 14
        color: "white"
        font.family: "微软雅黑"
        MouseArea{
            anchors.fill:parent
            onClicked:
            {
                slider01.value= 400
                slider02.value =1
                app.slotFogHeight(slider01.value)
                app.slotFogVisible(slider02.value*1000)
            }
        }

    }
    Text
    {
        id:heightText
        anchors.top: dynamicWindTimeSel.bottom
        anchors.topMargin: 21
        anchors.left: dynamicWind02ItemBg.left
        anchors.leftMargin: 20
        text:"雾霾高度:"
        font.pixelSize: 14
        color: "white"
        font.family: "微软雅黑"
        z:calendar.visible ? -1 :0

    }
    Text
    {
        id:heightText1
        anchors.top: heightText.top
        anchors.left: heightText.right
        anchors.leftMargin: 8
        text:"0"
        font.pixelSize: 14
        color: "white"
        font.family: "微软雅黑"
        z:calendar.visible ? -1 :0

    }
    Slider
    {
        id:slider01
        anchors.left: heightText1.right
        anchors.leftMargin: 10
        anchors.verticalCenter: heightText1.verticalCenter
        minimumValue: 0
        maximumValue: 500
        stepSize: 1
        value: 400
        width: 240
        z:calendar.visible ? -1 :0
        onValueChanged:
        {
            //show(slider01.value,)
            app.slotFogHeight(slider01.value)
        }

        style: SliderStyle
        {handle: Item{
                implicitWidth:  16
                implicitHeight: 16
                Rectangle
                {
                    id:sliderRec01
                    anchors.fill: parent
                    color: "transparent"
                    //                        color: "red"
                    clip: false
                    Image
                    {
                        id:sliderImage01
                        anchors.verticalCenter:  parent.verticalCenter
                        anchors.horizontalCenter:  parent.horizontalCenter
                        anchors.verticalCenterOffset: slider01.hovered ? 3:0
                        source:slider01.hovered ? "./切图/态势感知/滑块触碰.png":"./切图/态势感知/滑块.png"
                    }
                }


                Image {
                    id: sliderImage02
                    visible:true
                    anchors.bottom: sliderRec01.top
                    anchors.bottomMargin:2
                    anchors.left: sliderRec01.left
                    anchors.leftMargin: -16
                    width: 50
                    source: "./切图/态势感知/多边形-3.png"
                    Text
                    {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenterOffset: -2
                        text: parseInt(slider01.value) + "M"
                        font.family: "微软雅黑"
                    }
                }
            }
        }



    }
    Text
    {
        id:heightText01
        anchors.top: heightText.top
        //            anchors.topMargin: 40
        anchors.left: slider01.right
        anchors.leftMargin:8
        text:"500M"
        font.pixelSize: 14
        color: "white"
        font.family: "微软雅黑"
        z:calendar.visible ? -1 :0

    }

    Text
    {
        id:heightText2
        anchors.top: heightText.bottom
        anchors.topMargin: 21
        anchors.right: heightText.right
        text:"能见度:"
        font.pixelSize: 14
        color: "white"
        font.family: "微软雅黑"
        z:calendar.visible ? -1 :0

    }
    Text
    {
        id:heightText02
        anchors.top: heightText2.top
        //            anchors.topMargin: 40
        anchors.left: heightText2.right
        anchors.leftMargin: 8
        text:"0"
        font.pixelSize: 14
        color: "white"
        font.family: "微软雅黑"
        z:calendar.visible ? -1 :0

    }
    Slider
    {
        id:slider02
        anchors.left: heightText02.right
        anchors.leftMargin: 10
        anchors.verticalCenter: heightText02.verticalCenter
        width: 240
        value: 0
        z:calendar.visible ? -1 :0
        //             anchors.top: heightText1.top
        stepSize: 0.001
        minimumValue: 0
        maximumValue: 10
        onValueChanged:
        {
            //
            app.slotFogVisible(slider02.value * 1000)
        }

        style: SliderStyle
        {handle: Item{
                implicitWidth:  16
                implicitHeight: 16
                Rectangle
                {
                    id:sliderRec12
                    anchors.fill: parent
                    color: "transparent"
                    //                        color: "red"
                    Image
                    {
                        id:sliderImage12
                        anchors.verticalCenter:  parent.verticalCenter
                        anchors.horizontalCenter:  parent.horizontalCenter
                        anchors.verticalCenterOffset: slider02.hovered ? 3:0
                        source:slider02.hovered ? "./切图/态势感知/滑块触碰.png":"./切图/态势感知/滑块.png"
                        //                            source:"./切图/态势感知/滑块触碰.png"
                    }
                }


                Image {
                    id: sliderImage13
                    visible:true
                    anchors.bottom: sliderRec12.top
                    anchors.bottomMargin:2
                    anchors.left: sliderRec12.left
                    anchors.leftMargin: -16
                    source: "./切图/态势感知/多边形-3.png"
                    width: 70
                    Text
                    {
                        anchors.verticalCenter: parent.verticalCenter
                        anchors.horizontalCenter: parent.horizontalCenter
                        anchors.verticalCenterOffset: -2
                        text: {
                            var dis = slider02.value *1000;
                            if(dis > 1000) {
                                dis = dis / 1000;
                                parseInt(dis) + "KM"
                            }else{
                                parseInt(dis) + "M"
                            }
                        }

                        font.family: "微软雅黑"
                    }
                }
            }
        }


    }
    Text
    {
        id:heightText002
        anchors.top: heightText2.top
        //            anchors.topMargin: 40
        anchors.left: slider02.right
        anchors.leftMargin:8
        text:"10KM"
        font.pixelSize: 14
        color: "white"
        font.family: "微软雅黑"
        z:calendar.visible ? -1 :0

    }
}
